/**
 * @Author: easten
 * @Created: 2024-07-07 15:32:27
 * @Description: 数据卡片组件
 *
 */
import React, { useEffect } from "react";
export type DataCardProps = {
  label: string;
  value: number | string;
  unit?: string;
  icon?: React.ReactNode;
};
const DataCard: React.FC<DataCardProps> = (props: DataCardProps) => {
  const { label, value, unit, icon } = props;
  useEffect(() => {
    return () => {};
  }, []);
  return (
    <div
      className="flex flex-col w-full border"
      style={{ backgroundColor: "var(--td-bg-color-container)" }}
    >
      <div
        className="h-8 flex items-center justify-center relative"
        style={{
          backgroundColor: "var(--td-bg-color-secondarycontainer",
          color: "var(--td-text-color-placeholder)",
        }}
      >
        <div className=" absolute left-3">{icon}</div>
        <span>{label}</span>
      </div>
      <div className="h-11 flex items-center justify-center">
        <span className="text-xl text-sky-500">{value}</span>
        {unit && <span className="text-l text-sky-700">{unit}</span>}
      </div>
    </div>
  );
};
export default DataCard;
